<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
		<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="" style="margin-top: 3%;">
			<!-- 试卷信息 -->
			<div>
				<div align="center">
					<b style="font-size: 30px;" th:href="@{'info/' + ${paper.id}}" th:text="${paper.name}"></b>
					(<span th:text="${paper.createTime}"></span>)
				</div>
		        <div class="layui-col-xs5 layui-col-xs-offset7" style="font-size: 20px;margin-top: 2%;">
		        	<span>-----试卷分数：</span>
		        	<span th:text="${paper.score}"></span>
		        </div>
			</div>
			<!-- 试卷题目 -->
			<form class="layui-form" lay-filter="content">
				<!-- 单项选择题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>1. 单项选择题</h1>
					<div class="layui-form-item" th:each="oneChoice, status : ${oneChoices}" style="margin: 1%;">
						<div class="layui-col-xs12">
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${oneChoice.question}"></span>
							(<span th:text="${oneChoice.score}"></span>分)
						</div>
						<div class="layui-col-xs6">
							<div>
								<input class="layui-radio" type="radio" th:name="${'o_' + oneChoice.id}" value="A" th:title="${'A.&nbsp;' + oneChoice.aa}"/>
							</div>
							<div>
								<input class="layui-radio" type="radio" th:name="${'o_' + oneChoice.id}" value="B" th:title="${'B.&nbsp;' + oneChoice.ab}"/>
							</div>
							<div>
								<input class="layui-radio" type="radio" th:name="${'o_' + oneChoice.id}" value="C" th:title="${'C.&nbsp;' + oneChoice.ac}"/>
							</div>
							<div>
								<input class="layui-radio" type="radio" th:name="${'o_' + oneChoice.id}" value="D" th:title="${'D.&nbsp;' + oneChoice.ad}"/>
							</div>
						</div>
						<div class="layui-col-xs6">
							<div th:if="${oneChoice.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/oneChioce/' + ${oneChoice.id} + '.jpg'}"></div>
						</div>
					</div>
				</div>
				<!-- 多项选择题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>2. 多项选择题</h1>
					<div th:each="multipleChoice, status : ${multipleChoices}" style="margin: 1%;">
						<div class="layui-col-xs12">
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${multipleChoice.question}"></span>
							(<span th:text="${multipleChoice.score}"></span>分)
						</div>
						<div class="layui-col-xs6 layui-row">
							<div style="margin-top: 1%;margin-bottom: 1%;">
								<input type="checkbox" th:name="${'m_' + multipleChoice.id}" value="A" lay-skin="primary"/>
								A.&nbsp;<span th:text="${multipleChoice.aa}"></span>
							</div>
							<div style="margin-top: 1%;margin-bottom: 1%;">
								<input type="checkbox" th:name="${'m_' + multipleChoice.id}" value="B" lay-skin="primary"/>
								B.&nbsp;<span th:text="${multipleChoice.ab}"></span>
							</div>
							<div style="margin-top: 1%;margin-bottom: 1%;">
								<input type="checkbox" th:name="${'m_' + multipleChoice.id}" value="C" lay-skin="primary"/>
								C.&nbsp;<span th:text="${multipleChoice.ac}"></span>
							</div>
							<div style="margin-top: 1%;margin-bottom: 1%;">
								<input type="checkbox" th:name="${'m_' + multipleChoice.id}" value="D" lay-skin="primary"/>
								D.&nbsp;<span th:text="${multipleChoice.ad}"></span>
							</div>
						</div>
						<div class="layui-col-xs6">
							<div th:if="${multipleChoice.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/multipleChoice/' + ${multipleChoice.id} + '.jpg'}"></div>
						</div>
					</div>
				</div>
				<!-- 判断题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>3. 判断题</h1>
					<div th:each="judgment, status : ${judgments}" style="margin: 1%;">
						<div>
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${judgment.question}"></span>(&nbsp;&nbsp;)
							(<span th:text="${judgment.score}"></span>分)
							<input type="radio" th:name="${'j_' + judgment.id}" value="1" title="正确">
							<input type="radio" th:name="${'j_' + judgment.id}" value="0" title="错误">
						</div>
					</div>
				</div>
				<!-- 填空题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>4. 填空题</h1>
					<div th:each="fullInTheBlank, status : ${fullInTheBlanks}" style="margin: 1%;">
						<div class="layui-col-xs12">
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${fullInTheBlank.question}"></span>
							(<span th:text="${fullInTheBlank.score}"></span>分)
						</div>
						<div class="layui-col-xs6">
							<div class="layui-col-xs8">
								<input type="text" th:name="${'f_' + fullInTheBlank.id}" placeholder="请输入答案" class="layui-input">
							</div>
						</div>
						<div class="layui-col-xs6">
							<div th:if="${fullInTheBlank.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/fullInTheBlank/' + ${fullInTheBlank.id} + '.jpg'}"></div>
						</div>
					</div>
				</div>
				<!-- 简答题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>5. 简答题</h1>
					<div th:each="discussion, status : ${discussions}" style="margin: 1%;">
						<div class="layui-col-xs12">
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${discussion.question}"></span>
							(<span th:text="${discussion.score}"></span>分)
						</div>
						<div class="layui-col-xs12" style="margin-top: 1%;margin-bottom: 1%;height: 100px;color: red;">
							<div class="layui-col-xs6">
								<div class="layui-col-xs8">
									<textarea th:name="${'d_' + discussion.id}" placeholder="请输入答案" class="layui-textarea"></textarea>
								</div>
							</div>
							<div class="layui-col-xs6">
								<div th:if="${discussion.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/discussion/' + ${discussion.id} + '.jpg'}"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md11 layui-col-md-offset1" style="margin-top: 2%;margin-bottom: 2%;">
					<button type="button" lay-submit lay-filter="test" class="layui-btn">交卷</button>
				</div>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		var answer = {};
		var temp = {};
		var paperId = [[${paper.id}]]
		var courseId = [[${paper.courseId}]]
		layui.use(['form', 'layer'], function(){
			var layer = layui.layer;
			var form = layui.form;
			//监听checkbox选中
			form.on('checkbox', function(data){
				var val = data.elem.getAttribute('name');
				if(answer.hasOwnProperty(val)){
					if(data.elem.checked){
						answer[val].push(data.value)
					}else{
						answer[val].pop(data.value)
					}
				}else{
					answer[val] = []
					answer[val].push(data.value)
				}
			});  
			//监听提交
			form.on('submit(test)', function(data){
				//console.log(data.field)
				var field = data.field;
				for(var key in field){
					if(key.indexOf('m') == -1){
						answer[key] = field[key];
					}
				}
				var content = JSON.stringify(answer);
			    $.post('course/complete', {
			    	paperId: paperId,
			    	courseId: courseId,
			    	content: content
			    }, function(res){
			    	if(res.code == '00000'){
			    		layer.alert('交卷成功',{
			    			offset: 't'
			    		}, function(){
			    			$("#body", window.parent.document).attr('src', 'self')
			    		})
			    	}else{
			    		layer.alert(res.message);
			    	}
			    }, 'json')
			    return false;
			});
		});
	</script>
</html>